import { View, ViewProps } from 'react-native'
import React, { forwardRef, useMemo } from "react"
import { observer } from 'mobx-react-lite'
import { useGlobalStore } from '../mobx'
import { mergeStyles } from '../themes'

export interface ObserverViewProps extends Omit<ViewProps, "style"> {
  /** @description 需要换肤的样式传递 */
  themeStyle?: Record<string, any>
  /** @description 不需要换肤的样式传递 */
  style?: Record<string, any>
}

export const ObserverView = observer(forwardRef((props: ObserverViewProps, ref?: any) => {
  const { style, themeStyle, children, ...rest } = props;
  const { theme } = useGlobalStore()
  
  const memoTS = useMemo(() => mergeStyles({ style, themeStyle: { backgroundColor: 'color_2', ...themeStyle }, theme }), [style, themeStyle, theme])

  return <View ref={ref} style={memoTS} {...rest} >{children}</View>
}))